<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:a4j="http://richfaces.org/a4j">

    <h:head>
        <title>.: Supermercado Kwik-E-Mart :.</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="css/app.css" ></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bootstrap-theme.min.css" ></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bootstrap.min.css" ></h:outputStylesheet>

    </h:head>

    <h:body class="fondoPagin">
        <div id="wrap" >
            <h:panelGroup id="panelheader">
                <ui:include src="template/Header.xhtml" />
            </h:panelGroup>
            <h:form>

                <div class="container" style="padding-bottom: 100px;">
                    <div class="container">
                        <br/>

                        <div style="text-align: center;">
                            <h:graphicImage width="60%" height="50%" value="/resources/images/categorias/CARRO COMPRA.png" />
                        </div>

                        <div class="panel panel-default">
                            <div class="panel-body">

                                <h:panelGroup rendered="#{listadoProductosBean.listaDetallepedido.size() == 0}">
                                    <div class="alert alert-info" role="alert" style="text-align: center;"> <h3>! Debes Ingresar Productos a tu carro de Compras !</h3></div>
                                </h:panelGroup>
                                <div style="margin-left: 20%">

                                    <section id="contact-page">

                                        <div class="container">

                                            <h:panelGroup rendered="#{listadoProductosBean.listaDetallepedido.size()>0}">
                                                <div class="row contact-wrap"> 


                                                    <div class="col-sm-5 col-sm-offset-1">
                                                        <div class="form-group">
                                                            <label>Nombres y apellidos del Cliente</label>
                                                            <h:outputText class="form-control" value="#{sessionBean.clienteSesion.nombres} #{sessionBean.clienteSesion.apellidos}"></h:outputText>
                                                        </div>

                                                        <div class="form-group">
                                                            <label>Ciudad de envio del pedido*</label>
                                                            <h:inputText class="form-control" value="#{listadoProductosBean.pedidoUsuario.ciudadEnvio}" required="true" requiredMessage="Debe ingresar la ciudad de envio"></h:inputText>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Direccion de envio *</label>
                                                            <h:inputText class="form-control" value="#{listadoProductosBean.pedidoUsuario.direccionEnvio}" required="true" requiredMessage="Debe ingresar la direccion de envio"></h:inputText>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Numero de telefono *</label>
                                                            <h:inputText class="form-control" value="#{listadoProductosBean.pedidoUsuario.numTelEnvio}" required="true" requiredMessage="Debe ingresar el número de telefono"></h:inputText>


                                                        </div>

                                                        <rich:messages id="errores"></rich:messages>
                                                        <div style="text-align: center" class="form-group">

                                                            <a4j:commandButton 
                                                                style="  border-radius: 45px  12px;
                                                                font-size: 20px;
                                                                background-color: #dd0a07;
                                                                color: #ffffff;
                                                                box-shadow: inset 0px 0px 100px #dd8e0a;
                                                                " 
                                                                actionListener="#{listadoProductosBean.realizarPedido(sessionBean)}" 
                                                                value="Realizar Compra" 
                                                                oncomplete="if(#{!listadoProductosBean.resultado.ok}){#{rich:component('errorPagar')}.show(); } else if(#{listadoProductosBean.resultado.ok}) {#{rich:component('OkPagar')}.show(); }"
                                                                render="OkPagar errorPagar"
                                                                >
                                                            </a4j:commandButton>
                                                        </div>
                                                    </div>

                                                </div><!--/.row-->
                                            </h:panelGroup>
                                        </div><!--/.container-->
                                    </section><!--/#contact-page-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



            </h:form>
        </div>
        <div id="footer">
            <ui:include src="template/Footer.xhtml" />
        </div>
        <rich:popupPanel id="errorPagar" width="500" height="250" modal="true">
            <f:facet name="controls">

            </f:facet>
            <f:facet name="header">
                <h3 style="color: red; text-align: center"> Error al generar el pedido</h3>
            </f:facet>
            <h:form id="errorPagarForm">
                <a4j:region id="errorPagarregionForm">
                    <h3 style="text-align: justify">
                        #{listadoProductosBean.resultado.first}
                    </h3>
                    <br/>
                    <h:panelGroup style="margin-left: 40%">
                        <h:commandButton style="text-align: center"  value="Aceptar" ></h:commandButton>
                    </h:panelGroup>
                </a4j:region>
            </h:form>
        </rich:popupPanel>
        <rich:popupPanel id="OkPagar" width="650" height="600" modal="true">
            <f:facet name="controls">
            </f:facet>
            <f:facet name="header">
                <h3 style="color: #dd8e0a; text-align: center"> Se registro el pedido N #{listadoProductosBean.pedidoRealizadoOk.idPedido} </h3>
            </f:facet>
            <h:form id="OkPagarForm">
                <a4j:region id="OkPagarregionForm">
                    <h4> Datos del cliente :</h4>
                    <h:panelGrid columns="3">
                        <h4 style="color: #dd8e0a">
                            Nombres
                        </h4>
                        <h4>
                            #{listadoProductosBean.pedidoRealizadoOk.idCliente.nombres} #{listadoProductosBean.pedidoRealizadoOk.idCliente.apellidos}
                        </h4>
                        <h4 style="color: #dd8e0a">
                            Numero de documento : 
                        </h4>
                        <h4>
                            #{listadoProductosBean.pedidoRealizadoOk.idCliente.numeroDocumento}
                        </h4>
                        <h4 style="color: #dd8e0a">
                            Direccion de envio : 
                        </h4>
                        <h4>
                            #{listadoProductosBean.pedidoRealizadoOk.direccionEnvio}
                        </h4>
                        <h4 style="color: #dd8e0a">
                            Ciudad de envio :
                        </h4>
                        <h4>
                            #{listadoProductosBean.pedidoRealizadoOk.ciudadEnvio}
                        </h4>
                    </h:panelGrid>
                    <h:panelGrid columnClasses="acent">

                        <rich:dataTable value="#{listadoProductosBean.pedidoRealizadoOk.detallePedidoList}" var="Pro" id="table" rows="10">

                            <rich:column >
                                <f:facet name="header">
                                    <h4>Nombre Producto</h4>
                                </f:facet>

                                <h4><h:outputText value="#{Pro.idProducto.nombreProducto}" /></h4>
                            </rich:column>
                            <rich:column>
                                <f:facet name="header">
                                    <h4>Precio Producto</h4>
                                </f:facet>
                                <h4><h:outputText value="#{Pro.costo}" /></h4>
                            </rich:column>
                            <rich:column>
                                <f:facet name="header">
                                    <h4>Cantidad del  Producto</h4>
                                </f:facet>
                                <h4><h:outputText value="#{Pro.cantidad}" /></h4>
                            </rich:column>
                            <rich:column>
                                <f:facet name="header">
                                    <h4>Total X Producto</h4>
                                </f:facet>
                                <h4><h:outputText value="#{(Pro.cantidad * Pro.costo)}" /></h4>
                            </rich:column>
                        </rich:dataTable>

                    </h:panelGrid>
                    <h4>
                        <h:outputLabel value="Precio total del pedido $ "></h:outputLabel> #{listadoProductosBean.pedidoRealizadoOk.totalFactura}
                    </h4>
                    <div style="text-align: center">
                        <h:commandButton style="  border-radius: 45px  12px;
                                         font-size: 20px;
                                         background-color: #dd0a07;
                                         color: #ffffff;
                                         box-shadow: inset 0px 0px 100px #dd8e0a;
                                         "   value="Aceptar" action="Home" ></h:commandButton>
                    </div>
                </a4j:region>
            </h:form>
        </rich:popupPanel>
    </h:body>
</html>

